<template>
  <view :class="chapter_show ? 'control-scroll' : ''">
    <view>
      <u-navbar :border="false" :fixed="true" autoBack :bgColor="nav_color">
        <view class="" style="display: flex" slot="left">
          <u-icon
            name="/static/detail/back.png"
            width="20"
            height="14"
            style="margin-left: 4px"
          ></u-icon>
          <view :style="bgcolor">
            <u-text size="16" :text="title" color="#FFFFFF" lines="1"></u-text>
          </view>
          <!-- <u-image src="/static/image/mkz_ic_mhdetail_nav_return.png" width="18px" height="18px"></u-image> -->
        </view>
        <view style="display: flex" slot="right" @click="share_qrcode()">
          <u-icon
            name="/static/detail/share1.png"
            width="17"
            height="17"
            color="#ffffff"
            style="margin-right: 5px"
          ></u-icon>
        </view>
      </u-navbar>
    </view>

    <u-sticky zIndex="3">
      <view class="page-conatiner" v-show="nav_show" :style="bgcolor">
        <view class="card" :style="'height:' + nav_height + 'px'">
          <view class="bg-image" :style="'height:' + nav_height + 'px'">
            <image :src="data.picx"></image>
          </view>
          <view class="bg-gray"></view>
        </view>
      </view>
    </u-sticky>

    <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      @down="downCallback"
      @up="upCallback"
      :down="downOption"
      :up="upOption"
    >
      <view v-if="!loading_show">
        <view style="width: 100%; height: 524rpx; background-size: cover">
          <view
            style="
              display: flex;
              height: 524rpx;
              background-size: cover;
              background-position: center;
              align-items: flex-end;
            "
            :style="'background-image: url(' + data.picx + ')'"
          >
            <!-- <view
              style="
                background: linear-gradient(
                  180deg,
                  #ff000000,
                  rgba(0, 0, 0, 0.5)
                );
                width: 100%;
                height: 100%;
              "
            > -->
            <!-- </view> -->
            <view
              style="
                display: flex;
                width: 100%;
                justify-content: space-between;
                align-items: center;
              "
            >
              <view
                style="display: flex; flex-direction: column; margin: 0 24rpx"
              >
                <text
                  style="
                    font-size: 38rpx;
                    font-family: Helvetica;
                    color: #ffffff;
                    line-height: 56rpx;
                    margin-bottom: 12rpx;
                  "
                  >{{ data.name }}</text
                >
                <text
                  style="
                    font-size: 24rpx;
                    font-family: Helvetica;
                    color: #ffffff;
                    line-height: 36rpx;
                    margin-bottom: 24rpx;
                  "
                  >{{ data.hits }}人收藏
                </text>
              </view>
              <u-button
                @click="isfavor()"
                style="
                  height: 48rpx;
                  width: auto;
                  border-radius: 35rpx;
                  margin: 0;
                  margin-right: 24rpx;
                "
                color="linear-gradient(90deg, #FA9989 0%, #ED6753 100%)"
              >
                <u-image
                  v-if="data.fav == 0"
                  width="24rpx"
                  height="22rpx"
                  style="margin-right: 10rpx"
                  src="/static/detail/fav.png"
                ></u-image>
                <u-image
                  v-else
                  width="24rpx"
                  height="22rpx"
                  style="margin-right: 10rpx"
                  src="/static/detail/ic_read_sc_on.png"
                ></u-image>
                {{ data.fav == 0 ? "收藏" : "取消收藏" }}
              </u-button>
            </view>
          </view>
        </view>
        <!-- <view style="margin: -135rpx 24rpx 0 24rpx; min-height: 372rpx">
          <view
            style="
              background: #ffffff;
              box-shadow: 0px 2px 40px 0px rgba(0, 0, 0, 0.1);
              border-radius: 8px 8px 0px 0px;
              padding: 0 32rpx 22rpx 32rpx;
              height: 100%;
            "
          >
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: space-between;
              "
            >
              <view
                style="
                  display: flex;
                  flex-direction: column;
                  padding-top: 32rpx;
                "
              >
                <text
                  style="font-weight: 600; color: #000000; font-size: 20px"
                  >{{ data.name }}</text
                >
                <view style="margin-top: 5px; margin-bottom: 30rpx">
                  <text
                    style="
                      background: #f4f4f4;
                      padding: 3px 8px;
                      border-radius: 3px;
                      font-size: 20rpx;
                      color: #999999;
                      border-radius: 4rpx;
                    "
                    >{{ data.hits }}人气</text
                  >
                </view>
              </view>
              <view>
                <view
                  style="padding-left: 25rpx; border-left: 1px solid #efefef"
                >
                  <view
                    style="
                      color: #ffffff;
                      font-size: 22px;
                      background-color: rgba(255, 255, 255, 0.91);
                      border-radius: 6px;
                      display: flex;
                      justify-content: center;
                    "
                  >
                    <text style="color: #ff5500; font-weight: bold">
                      {{ data.score }}
                    </text>
                  </view>
                  <view
                    style="
                      color: #ffffff;
                      font-size: 22px;
                      background-color: rgba(255, 255, 255, 0.3);
                      border-radius: 6px;
                      display: flex;
                      justify-content: center;
                      margin-top: -9px;
                      padding-top: 11px;
                    "
                  >
                    <u-rate
                      count="5"
                      v-model="data.score"
                      :allowHalf="true"
                      size="8"
                      gutter="0"
                    ></u-rate>
                  </view>
                </view>
              </view>
            </div>
            <view>
              <text-ellipsis
                font-size="28rpx"
                show-shrink=""
                style="color: #5a5a5a"
                show-more-label="展开"
              >
                {{ data.text }}
              </text-ellipsis>
            </view>
            <view
              style="
                display: flex;
                font-weight: 500;
                margin: 13px 0 0 0;
                font-size: 26rpx;
                color: #666666;
              "
            >
              <view style="margin-top: auto; margin-bottom: auto">
                <text>作者:</text>
              </view>
              <view style="margin-top: auto; margin-bottom: auto">
                {{ data.author }}
              </view>
            </view>
          </view>
          <view style="margin-left: 15px; margin-right: 15px">
            <text-ellipsis
              font-size="28rpx"
              show-more-label="展开"
              show-shrink=""
              style="color: #5a5a5a"
            >
              {{ data.text }}
            </text-ellipsis>
          </view>
        </view> -->
        <!-- 简介 -->
        <!-- <view style="margin-left: 15px; margin-right: 15px">
          <text-ellipsis
            font-size="28rpx"
            show-more-label="展开"
            show-shrink=""
            style="color: #5a5a5a"
          >
            {{ data.text }}
          </text-ellipsis>
        </view> -->
        <!-- 作者 -->

        <!-- 热度数据 -->
        <view
          style="
            display: flex;
            justify-content: space-between;
            margin: 30rpx 24rpx;
            flex-direction: column;
          "
        >
          <text
            style="
              font-size: 26rpx;
              font-family: Helvetica;
              color: #333333;
              line-height: 42rpx;
            "
          >
            {{ data.text }}</text
          >
          <text
            style="
              font-size: 26rpx;
              font-family: PingFangSC, PingFang SC;
              color: #666666;
              line-height: 37rpx;
              margin-top: 24rpx;
            "
          >
            作者：{{ data.author }}</text
          >
        </view>
        <view
          style="
            margin: 0 24rpx;
            height: 171rpx;
            background: #f0f8f5;
            border-radius: 16rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <view style="display: flex; flex-direction: column; margin: 0 24rpx">
            <view
              style="display: flex; align-items: center; margin-bottom: 11rpx"
            >
              <text
                style="font-size: 28rpx; color: #333333; line-height: 34rpx"
              >
                当前排名
              </text>
              <image
                style="width: 13rpx; height: 23rpx; margin-left: 10rpx"
                src="/static/detail/arrow.png"
              ></image
            ></view>
            <text style="font-size: 34rpx; color: #f08d34; line-height: 41rpx">
              NO.{{ data.cion_rank }}
            </text>
          </view>
          <u-button
            style="
              border-radius: 32rpx;
              width: auto;
              margin: 0;
              height: 63rpx;
              margin-right: 24rpx;
            "
            @click="slw_open(0)"
            color="linear-gradient(270deg, #4DCBA5 0%, #6BD6B5 100%)"
            >打赏/月票</u-button
          >
        </view>
        <view
          style="
            height: 87rpx;
            background: #f0f8f5;
            margin-top: 24px;
            display: flex;
            justify-content: center;
          "
        >
          <view>
            <u-tabs
              :current="tabCurrent"
              @change="onChange1"
              :list="[
                {
                  name: '目录',
                },
                {
                  name: '评论',
                },
              ]"
              lineColor="#50CCA6"
              :activeStyle="{
                color: '#50CCA6',
              }"
              :inactiveStyle="{
                color: '#333',
              }"
            ></u-tabs>
          </view>
        </view>
        <!-- <u-line dashed></u-line> -->

        <!-- 章节列表 -->
        <view v-if="tabCurrent === 0" style="margin: 15px 15px 15px 15px">
          <view
            style="
              display: flex;
              justify-content: space-between;
              margin-bottom: 15px;
              margin-top: 5px;
            "
          >
            <view style="display: flex">
              <text
                style="
                  font-weight: 500;
                  margin-left: 10rpx;
                  color: #000;
                  font-size: 18px;
                  margin-right: 16rpx;
                "
                >{{ data.state }}
              </text>
              <view :class="[['tag1', 'tag', 'tag2'][+data.pay]]"></view>
            </view>

            <u-icon
              v-if="data.nums !== '0'"
              label="查看目录"
              labelPos="left"
              labelSize="12px"
              labelColor="grey"
              size="14px"
              bold
              color="grey"
              name="arrow-right"
              @click="chapter_open"
            ></u-icon>
            <u-icon
              v-else
              label="暂无更新"
              labelPos="left"
              labelSize="12px"
              labelColor="grey"
            ></u-icon>
          </view>
          <view v-if="data.nums !== '0'">
            <u-scroll-list :indicator="false">
              <view
                v-for="(item, index) in data.chapter_list"
                :key="index"
                @click="read_chapter(item.id)"
              >
                <view style="position: relative">
                  <u-image
                    width="130px"
                    height="70px"
                    radius="5"
                    :src="item.picx"
                    style="
                      border: 0.5px solid #eee;
                      border-radius: 5px;
                      margin-right: 10px;
                      margin-bottom: 8px;
                    "
                  >
                    <view slot="error" style="font-size: 24rpx">加载失败</view>
                    <view
                      slot="loading"
                      style="width: 130px; height: 70px; border-radius: 5px"
                    >
                      <image
                        src="/static/detail/mkz_bg_chapter_loading_img.png"
                        style="width: 100%; height: 100%; border-radius: 5px"
                        mode="scaleToFill"
                      ></image>
                    </view>
                  </u-image>
                  <!-- <view
                    style="
                      position: absolute;
                      right: 10px;
                      bottom: 0px;
                      border-radius: 5px 0 0 0;
                      background: rgba(0, 0, 0, 0.5);
                      color: #fff;
                      font-size: 11px;
                      padding: 0 5px;
                    "
                  >
                    {{ item.pnum }}P
                  </view> -->
                  <view
                    style="
                      position: absolute;
                      left: 0px;
                      top: -2px;
                      border-radius: 0px;
                    "
                    v-if="item.cion !== '0'"
                  >
                    <image
                      src="/static/detail/mkz_ic_detaillist_vip_w.png"
                      style="width: 48rpx; height: 32rpx; border-radius: 0px"
                      lazy-load
                    ></image>
                  </view>
                  <view
                    style="
                      position: absolute;
                      left: 0px;
                      top: -7rpx;
                      border-radius: 0px;
                    "
                    v-else-if="item.vip !== '0'"
                  >
                    <image
                      src="/static/detail/mkz_ic_readlist_vip.png"
                      style="width: 56rpx; height: 28rpx; border-radius: 0px"
                      lazy-load
                    ></image>
                  </view>
                </view>
                <u--text
                  :lines="1"
                  :text="item.name"
                  size="14"
                  color="#444444"
                ></u--text>
              </view>
              <view
                style="width: 60px; margin-top: auto; margin-bottom: auto"
                @click="chapter_open"
              >
                <u-icon
                  name="/static/detail/mkz_ic_detail_mllist_r.png"
                  size="30"
                  style="margin-left: 15px; margin-right: 15px"
                ></u-icon>
                <view
                  style="
                    display: flex;
                    justify-content: center;
                    margin-top: 5px;
                  "
                >
                  <text style="color: #aaaaaa; font-size: 12px">查看更多</text>
                </view>
              </view>
            </u-scroll-list>
          </view>
        </view>

        <!-- 评论列表 -->
        <view v-else style="margin: 0px 15px 15px 15px">
          <view
            style="
              display: flex;
              justify-content: space-between;
              margin-bottom: 15px;
              margin-top: 5px;
            "
          >
            <!-- <view
              style="
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
              "
            >
              <view>
                <text style="font-size: 18px; font-weight: bold"
                  >#{{ data.name }}</text
                >
              </view>
              <view
                style="display: flex"
                @click="comment_show = true"
                v-if="data.comment_list"
              >
                <text style="font-size: 12px; color: #59b9ca">{{
                  data.comment_list.length == 0
                    ? "暂无评论,快来抢沙发吧"
                    : "与" + data.comment_list.length + "人一起讨论"
                }}</text>
                <u-icon
                  name="arrow-right"
                  size="13px"
                  color="#59B9CA"
                  bold
                ></u-icon>
              </view>
            </view> -->
            <!-- <view
              @click="comment_show = true"
              style="
                background-color: #fdf6ec;
                border-radius: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 2px;
                margin-top: auto;
                margin-bottom: auto;
              "
            >
              <u-image
                src="/static/detail/mkz_ic_detail_ft.png"
                width="44rpx"
                height="44rpx"
                style="margin-left: 3px"
              ></u-image>
              <text
                style="
                  color: #ff620e;
                  font-size: 12px;
                  margin: auto 3px auto 1px;
                "
                >发帖~</text
              >
            </view> -->
          </view>

          <u-empty
            mode="comment"
            icon="http://cdn.uviewui.com/uview/empty/comment.png"
            text="暂无评论,快来抢沙发吧"
            textSize="12"
            v-if="data.comment_nums == 0"
          >
          </u-empty>

          <view
            v-for="(item, index) in (data.comment_list || []).slice(0, 2)"
            :key="index"
            style="margin-bottom: 25px"
          >
            <view style="display: flex">
              <view style="margin-top: auto; margin-bottom: auto">
                <u-avatar :src="item.upic" size="30"></u-avatar>
              </view>
              <view style="margin: auto auto auto 8px">
                <view style="display: flex">
                  <text style="font-size: 13px">{{ item.unichen }}</text>
                </view>
                <view style="display: flex">
                  <text style="font-size: 11px; color: #aaaaaa">{{
                    item.addtime
                  }}</text>
                </view>
              </view>
            </view>
            <view style="margin-top: 8px">
              <text style="font-size: 15px; color: #161616">
                {{ item.text }}
              </text>
            </view>
            <view
              style="
                margin: 10px 30px auto auto;
                display: flex;
                width: 40%;
                justify-content: flex-end;
              "
            >
              <!-- <view style="display: flex">
                <view style="display: flex">
                  <u-icon
                    name="/static/detail/ic_coment_pl.png"
                    size="18"
                  ></u-icon>
                </view>
                <view style="display: flex; margin-left: 1px">
                  <text style="color: #aaaaaa; font-size: 12px">{{
                    item.reply_num == 0 ? "" : item.reply_num
                  }}</text>
                </view>
              </view> -->
              <view>
                <view
                  v-if="item.is_zan == 0"
                  style="display: flex"
                  @click="comment_zan_click(item.id)"
                >
                  <view style="display: flex">
                    <u-icon
                      name="/static/detail/ic_coment_dz_off_1.png"
                      size="18"
                    ></u-icon>
                  </view>
                  <view style="display: flex; margin-left: 1px">
                    <text style="color: #aaaaaa; font-size: 12px">{{
                      item.zan
                    }}</text>
                  </view>
                </view>
                <view
                  v-else
                  style="display: flex"
                  @click="comment_zan_cancel(item.id)"
                >
                  <view style="display: flex">
                    <u-icon
                      name="/static/detail/ic_coment_dz_on.png"
                      size="18"
                    ></u-icon>
                  </view>
                  <view style="display: flex; margin-left: 1px">
                    <text style="color: #ff620e; font-size: 12px">{{
                      item.zan
                    }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <u-button
            @click="goCom()"
            style="color: #999999"
            shape="circle"
            v-if="data.comment_nums >= 3"
            color="#F7F7F7"
          >
            查看更多{{ data.comment_nums }}条评论
          </u-button>
        </view>

        <view style="margin: 15px 15px 15px 15px">
          <view
            style="
              display: flex;
              justify-content: space-between;
              margin-bottom: 15px;
              margin-top: 5px;
            "
          >
            <text
              style="
                font-weight: 500;
                margin-left: 10rpx;
                color: #000;
                font-size: 18px;
              "
              >猜您喜欢</text
            >
          </view>
          <u-scroll-list :indicator="false">
            <view
              v-for="(item, index) in data.love_list"
              :key="index"
              @click="cainixihuan(item.id)"
            >
              <u-image
                :class="[['tag1', 'tag3', 'tag2'][+item.pay]]"
                width="105px"
                height="140px"
                radius="5"
                :src="item.pic"
                style="margin-right: 10px; margin-bottom: 8px"
              >
                <view slot="error" style="font-size: 24rpx">加载失败</view>
              </u-image>
              <u--text
                :lines="1"
                :text="item.name"
                size="14"
                color="#444444"
              ></u--text>
            </view>
          </u-scroll-list>
        </view>
      </view>

      <view style="height: 65px"></view>
    </mescroll-body>

    <!-- 送礼物弹窗 -->
    <hqs-popup
      v-model="slw_show"
      :height="slw_height + 'rpx'"
      style="position: relative"
      :round="0"
      showClose="close"
      :styles="{
        padding: 0,
        paddingRight: '24rpx',
      }"
    >
      <template #title>
        <view style="display: flex; justify-content: space-between">
          <u-tabs
            :current="current"
            @change="onChange"
            lineColor="#50CCA6"
            :activeStyle="{
              color: '#50CCA6',
            }"
            :inactiveStyle="{
              color: '#747474',
            }"
            :list="[
              {
                name: '打赏',
              },
              {
                name: '月票',
              },
            ]"
          ></u-tabs>
        </view>
      </template>
      <u-line></u-line>

      <view class="c" v-if="current === 0">
        <view
          style="
            display: flex;
            justify-content: space-between;
            padding-left: 15px;
            padding-right: 15px;
            flex-wrap: wrap;
          "
        >
          <view
            v-for="(item, index) in slw_data"
            :key="index"
            style="
              width: 208rpx;
              height: 208rpx;
              background: #ffffff;
              border-radius: 16rpx;
              display: flex;
              flex-direction: column;
              align-items: center;
              color: #333333;
              justify-content: center;
              margin-bottom: 24rpx;
            "
            @click="
              slw_id = item.id;
              slw_cion = item.cion;
            "
            :style="
              slw_id == item.id
                ? 'border: 1px solid #36C4DE;'
                : 'border: 1px solid #D5D5D5;'
            "
          >
            <view
              style="display: flex; justify-content: center; margin-bottom: 3px"
            >
              <image
                :src="item.pic"
                style="width: 98rpx; height: 98rpx"
              ></image>
            </view>
            <view
              style="
                display: flex;
                justify-content: center;
                margin-bottom: 8rpx;
              "
            >
              <text style="font-size: 24rpx">{{ item.name }}</text>
            </view>
            <view
              style="
                display: flex;
                justify-content: center;
                align-items: center;
                color: #747474;
              "
            >
              <!-- <image
                src="../ucenter/coin/images/1.png"
                style="width: 24rpx; height: 24rpx; margin-right: 5rpx"
                alt=""
              /> -->
              <text style="font-size: 22rpx">{{ item.cion + "金币" }}</text>
            </view>
          </view>
        </view>
        <view style="display: flex; justify-content: space-between"> </view>
        <view
          style="
            margin: 10px 0 0 0;
            padding: 0 10px;
            width: calc(100%);
            box-sizing: border-box;
            position: fixed;
            bottom: 0;
            box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.05);
          "
        >
          <view style="display: flex; align-items: center">
            <image
              style="width: 62rpx; height: 63rpx"
              src="../ucenter/coin/images/1.png"
            ></image>
            <text style="font-size: 24rpx; color: #333; margin-top: 5rpx"
              >我的{{ "剩余" + data.cion_name + "：" + user.cion + "个" }}</text
            >
          </view>
          <u-button
            color="linear-gradient(90deg, #6BD6B5 0%, #2AB1A4 100%)"
            style="border-radius: 16rpx"
            :disabled="!isLogin || slw_cion - 0 > user.cion - 0"
            @click="slw_send"
            >{{
              !isLogin
                ? "请登录"
                : slw_cion - 0 > user.cion - 0
                ? data.cion_name + "不足"
                : "确定"
            }}</u-button
          >
          <view
            style="text-align: center; padding: 17rpx 0 27rpx 0"
            @click="goCoin"
          >
            <text style="font-size: 30rpx; color: #50cca6; line-height: 36rpx"
              >充值{{ data.cion_name }}</text
            >
            <image
              @click=""
              src="./images/arrow.png"
              style="width: 14rpx; height: 24rpx; margin-left: 16rpx"
            ></image>
          </view>
          <!-- <view
            style="
              display: flex;
              justify-content: center;
              margin: auto;
              font-size: 32rpx;
            "
            v-if="!isLogin"
          >
            <text>请登录后打赏</text>
          </view>
          <view
            @click="$u.route('/pages/ucenter/coin/coin')"
            style="
              display: flex;
              justify-content: center;
              margin: auto;
              font-size: 32rpx;
            "
            v-else-if="slw_cion - 0 > user.cion - 0"
          >
            <text>{{ data.cion_name }}不足，去购买</text>
          </view>
          <view
            style="
              display: flex;
              justify-content: center;
              color: #333333;
              font-size: 32rpx;
              background-color: #8fe8f4;
              width: 232rpx;
              margin-right: -10px;
              align-items: center;
            "
            v-else
            @click="slw_send()"
          >
            <text>确定</text>
          </view> -->
        </view>
        <view style="height: 1px"></view>
      </view>
      <view class="c" v-else>
        <view
          style="
            display: flex;
            justify-content: space-between;
            padding-left: 15px;
            padding-right: 15px;
            flex-wrap: wrap;
          "
        >
        </view>
        <view style="display: flex; justify-content: center; margin-top: 53rpx">
          <u-number-box v-model="typ_num" @change="valChange"></u-number-box>
        </view>
        <view
          style="
            margin: 10px 0 0 0;
            padding: 0 10px;
            width: calc(100%);
            box-sizing: border-box;
            position: fixed;
            bottom: 0;
            box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.05);
          "
        >
          <!-- <view style="display: flex; align-items: center">
            <image
              src="/static/ticket.png"
              style="width: 66rpx; height: 58rpx; margin-right: 24rpx"
            ></image>
            <text style="font-size: 30rpx; color: #e19402; margin-top: 5rpx">{{
              user.ticket
            }}</text>
          </view> -->
          <view
            style="display: flex; align-items: center; margin: 18rpx 0 10rpx 0"
          >
            <image
              style="width: 42rpx; height: 26rpx; margin-right: 14rpx"
              src="../ucenter/ticket/Images/ticket.png"
            ></image>
            <text style="font-size: 24rpx; color: #333; margin-top: 5rpx">{{
              "剩余月票" + "：" + user.ticket + "张"
            }}</text>
          </view>
          <u-button
            color="linear-gradient(90deg, #6BD6B5 0%, #2AB1A4 100%)"
            style="border-radius: 16rpx"
            :disabled="!isLogin || typ_num - 0 > user.ticket - 0"
            @click="typ_send"
            >{{
              !isLogin
                ? "请登录"
                : typ_num - 0 > user.ticket - 0
                ? "月票不足"
                : "确定"
            }}</u-button
          >
          <view
            style="text-align: center; padding: 17rpx 0 27rpx 0"
            @click="goTic"
          >
            <text style="font-size: 30rpx; color: #50cca6; line-height: 36rpx"
              >充值月票</text
            >
            <image
              @click=""
              src="./images/arrow.png"
              style="width: 14rpx; height: 24rpx; margin-left: 16rpx"
            ></image>
          </view>
          <!-- <div style=" width: 241rpx">
     
          </div> -->
          <!-- <u--input
            placeholder="自定义月票"
            style="background-color: #f7f7f7; height: 44rpx; margin: 0 36px"
            shape="circle"
            v-model="typ_num"
          ></u--input> -->

          <!-- <view
            style="
              display: flex;
              justify-content: center;
              margin: auto;
              font-size: 32rpx;
            "
            v-if="!isLogin"
          >
            <text>请登录后打赏</text>
          </view>
          <view
            @click="$u.route('/pages/ucenter/ticket/ticket')"
            style="
              display: flex;
              justify-content: center;
              margin: auto;
              font-size: 32rpx;
            "
            v-else-if="typ_num - 0 > user.ticket - 0"
          >
            <text>月票不足，去购买</text>
          </view>
          <view
            style="
              display: flex;
              justify-content: center;
              color: #333333;
              font-size: 32rpx;
              background-color: #8fe8f4;
              width: 232rpx;
              margin-right: -10px;
              align-items: center;
              height: 100%;
            "
            v-else
            @click="typ_send()"
          >
            <text>确定</text>
          </view> -->
        </view>
        <view style="height: 1px"></view>
      </view>
      <!-- <view
        style="
          position: fixed;
          top: -30px;
          left: 0;
          right: 0;
          z-index: 9999999;
          display: flex;
          justify-content: space-between;
        "
      >
        <view
          style="
            background-color: #5b3f30;
            display: flex;
            height: 18px;
            padding: 3px;
            border-radius: 0 50px 50px 0;
          "
        >
          <view
            style="
              display: flex;
              background: linear-gradient(#ff660f, #ff961f);
              border-radius: 50px;
              padding-right: 5px;
            "
          >
            <image
              src="../../static/detail/mkz_ic_dstc_dsb.png"
              style="width: 26rpx; height: 24rpx; margin: auto; padding: 3px"
            ></image>
            <text style="color: #fff; font-size: 28rpx; margin: auto">{{
              data.cion_rank
            }}</text>
          </view>
          <view style="color: #fff; margin: auto 3px">
            <u-icon
              :label="'打赏榜第' + data.cion_rank + '名'"
              color="#fff"
              size="13px"
              labelColor="#fff"
              labelPos="left"
              labelSize="28rpx"
              name="arrow-right"
              @click=""
            ></u-icon>
          </view>
        </view>
        <lff-barrage ref="slw" :maxTop="240" type="leftBottom"></lff-barrage>
      </view>
      <view class="c">
        <view
          style="
            display: flex;
            justify-content: space-between;
            padding-left: 15px;
            padding-right: 15px;
            flex-wrap: wrap;
          "
        >
          <view
            v-for="(item, index) in slw_data"
            :key="index"
            style="
              border-radius: 5px;
              padding: 5px;
              width: 18%;
              margin-bottom: 5px;
            "
            @click="
              slw_id = item.id;
              slw_cion = item.cion;
            "
            :style="
              slw_id == item.id
                ? 'border: 1px solid #fd610e;background-color: #fdefe1;'
                : 'border: 1px solid #dbdbdb;'
            "
          >
            <view
              style="display: flex; justify-content: center; margin-bottom: 3px"
            >
              <image
                :src="item.pic"
                style="width: 72rpx; height: 72rpx"
              ></image>
            </view>
            <view style="display: flex; justify-content: center">
              <text
                style="font-size: 26rpx"
                :style="slw_id == item.id ? 'color: #fd610e;' : ''"
                >{{ item.name }}</text
              >
            </view>
            <view style="display: flex; justify-content: center">
              <text
                style="font-size: 22rpx"
                :style="slw_id == item.id ? 'color: #fd610e;' : 'color: grey;'"
                >{{ item.cion }}{{ data.cion_name }}</text
              >
            </view>
          </view>
        </view>
        <view style="display: flex; justify-content: space-between">
          <view style="padding: 15px; font-size: 28rpx; color: #c6c7c8">
            <text>我的{{ data.cion_name }}：{{ user.cion }}</text>
          </view>
          <view
            style="padding: 15px; font-size: 28rpx; color: #fd610e"
            @click="$u.route('/pages/ucenter/coin/coin')"
          >
            <text>充值></text>
          </view>
        </view>
        <view
          style="
            margin: 15px;
            padding: 10px;
            border-radius: 50px;
            background-color: #fd610e;
          "
        >
          <view
            style="
              display: flex;
              justify-content: center;
              margin: auto;
              color: #fff;
              font-size: 32rpx;
            "
            v-if="!isLogin"
          >
            <text>请登录后打赏</text>
          </view>
          <view
            @click="$u.route('/pages/ucenter/coin/coin')"
            style="
              display: flex;
              justify-content: center;
              margin: auto;
              color: #fff;
              font-size: 32rpx;
            "
            v-else-if="slw_cion - 0 > user.cion - 0"
          >
            <text>{{ data.cion_name }}不足，去购买</text>
          </view>
          <view
            style="
              display: flex;
              justify-content: center;
              margin: auto;
              color: #fff;
              font-size: 32rpx;
            "
            v-else
            @click="slw_send()"
          >
            <text>立即打赏</text>
          </view>
        </view>
        <view style="height: 1px"></view>
      </view> -->
    </hqs-popup>

    <!-- 投月票弹窗 -->
    <hqs-popup
      :title="'为《' + data.name + '》投月票'"
      v-model="typ_show"
      :height="typ_height + 'px'"
      showClose="close"
    >
      <view class="b">
        <view
          style="
            background-color: #f6f6f6;
            display: flex;
            padding: 13px 73px 13px 15px;
            position: relative;
            justify-content: space-between;
          "
        >
          <view style="margin-top: auto; margin-bottom: auto">
            <view style="color: #666666; font-size: 26rpx">
              <text>当前排名></text>
            </view>
            <view
              style="
                color: #fd610e;
                font-size: 50rpx;
                font-weight: 600;
                display: flex;
                justify-content: center;
              "
            >
              <text>{{ data.ticket_rank }}</text>
            </view>
          </view>
          <view
            style="
              height: 50px;
              width: 1px;
              background-color: #e8e8e8;
              margin-top: auto;
              margin-bottom: auto;
            "
          ></view>
          <view style="font-size: 28rpx; margin-top: auto; margin-bottom: auto">
            <view style="line-height: 50rpx">
              <text>当前月票数 {{ data.ticket }}</text>
            </view>
            <view style="line-height: 50rpx" v-if="data.ticket_rank == 1">
              <text>当前月票榜第一名，继续保持哦!</text>
            </view>
            <view style="line-height: 50rpx" v-else>
              <text>距上一名，还差您的关键票</text>
            </view>
          </view>
          <view style="position: absolute; right: 0; bottom: -3px">
            <image
              src="/static/detail/mkz_pic_pmzs.png"
              style="width: 146rpx; height: 116rpx"
            ></image>
          </view>
        </view>
        <view style="display: flex; justify-content: space-between">
          <view style="padding: 15px; font-size: 26rpx; color: #c6c7c8">
            <text>我的月票：{{ user.ticket }}</text>
            <!-- <text>我的{{data.cion_name}}：{{user.cion}}</text> -->
          </view>
        </view>
        <view
          style="
            display: flex;
            justify-content: space-between;
            padding-left: 15px;
            padding-right: 15px;
          "
        >
          <view
            style="border-radius: 5px; padding: 5px; width: 18%"
            @click="typ_num = 1"
            :style="
              typ_num == 1
                ? 'border: 1px solid #fd610e;background-color: #fdefe1;'
                : 'border: 1px solid #dbdbdb;'
            "
          >
            <view style="display: flex; justify-content: center">
              <image
                :src="
                  typ_num == 1
                    ? '/static/detail/mkz_ic_typ_yp1_on.png'
                    : '/static/detail/mkz_ic_typ_yp1_off.png'
                "
                style="width: 72rpx; height: 72rpx"
              ></image>
            </view>
            <view style="display: flex; justify-content: center">
              <text
                style="font-size: 26rpx"
                :style="typ_num == 1 ? 'color: #fd610e;' : 'color: grey;'"
                >1张月票</text
              >
            </view>
          </view>
          <view
            style="border-radius: 5px; padding: 5px; width: 18%"
            @click="typ_num = 2"
            :style="
              typ_num == 2
                ? 'border: 1px solid #fd610e;background-color: #fdefe1;'
                : 'border: 1px solid #dbdbdb;'
            "
          >
            <view style="display: flex; justify-content: center">
              <image
                :src="
                  typ_num == 2
                    ? '/static/detail/mkz_ic_typ_yp2_on.png'
                    : '/static/detail/mkz_ic_typ_yp2_off.png'
                "
                style="width: 72rpx; height: 72rpx"
              ></image>
            </view>
            <view style="display: flex; justify-content: center">
              <text
                style="font-size: 26rpx"
                :style="typ_num == 2 ? 'color: #fd610e;' : 'color: grey;'"
                >2张月票</text
              >
            </view>
          </view>
          <view
            style="border-radius: 5px; padding: 5px; width: 18%"
            @click="typ_num = 3"
            :style="
              typ_num == 3
                ? 'border: 1px solid #fd610e;background-color: #fdefe1;'
                : 'border: 1px solid #dbdbdb;'
            "
          >
            <view style="display: flex; justify-content: center">
              <image
                :src="
                  typ_num == 3
                    ? '/static/detail/mkz_ic_typ_yp3_on.png'
                    : '/static/detail/mkz_ic_typ_yp3_off.png'
                "
                style="width: 72rpx; height: 72rpx"
              ></image>
            </view>
            <view style="display: flex; justify-content: center">
              <text
                style="font-size: 26rpx"
                :style="typ_num == 3 ? 'color: #fd610e;' : 'color: grey;'"
                >3张月票</text
              >
            </view>
          </view>
          <view
            style="border-radius: 5px; padding: 5px; width: 18%"
            @click="typ_num = 4"
            :style="
              typ_num == 4
                ? 'border: 1px solid #fd610e;background-color: #fdefe1;'
                : 'border: 1px solid #dbdbdb;'
            "
          >
            <view style="display: flex; justify-content: center">
              <image
                :src="
                  typ_num == 4
                    ? '/static/detail/mkz_ic_typ_yp4_on.png'
                    : '/static/detail/mkz_ic_typ_yp4_off.png'
                "
                style="width: 72rpx; height: 72rpx"
              ></image>
            </view>
            <view style="display: flex; justify-content: center">
              <text
                style="font-size: 26rpx"
                :style="typ_num == 4 ? 'color: #fd610e;' : 'color: grey;'"
                >全部月票</text
              >
            </view>
          </view>
        </view>
        <view
          style="
            margin: 15px;
            padding: 10px;
            border-radius: 50px;
            background-color: #fd610e;
          "
        >
          <view
            style="
              display: flex;
              justify-content: center;
              margin: auto;
              color: #fff;
              font-size: 32rpx;
            "
            v-if="!isLogin"
          >
            <text>请登录后投票</text>
          </view>
          <view
            @click="$u.route('/pages/ucenter/ticket/ticket')"
            style="
              display: flex;
              justify-content: center;
              margin: auto;
              color: #fff;
              font-size: 32rpx;
            "
            v-else-if="typ_num > user.ticket - 0"
          >
            <text>月票不足，去购买</text>
          </view>
          <view
            style="
              display: flex;
              justify-content: center;
              margin: auto;
              color: #fff;
              font-size: 32rpx;
            "
            v-else
            @click="typ_send()"
          >
            <text>立即投票</text>
          </view>
        </view>
        <view style="height: 1px"></view>
      </view>
    </hqs-popup>

    <!-- 章节列表弹窗 -->
    <hqs-popup
      title="目录"
      v-model="chapter_show"
      showClose="close"
      :height="chapter_height + 'px'"
      showBack
      from="left"
      :round="0"
      :styles="{
        marginTop: '0',
      }"
      width="80vw"
    >
      <view
        style="
          display: flex;
          margin: auto 15px;
          justify-content: space-between;
          border-bottom: 1px solid #d6d7d9;
          padding-bottom: 4px;
          padding-top: 100rpx;
        "
        :style="{
          paddingBottom: data.pay >= 1 ? '40rpx' : '0',
        }"
      >
        <view style="display: flex; flex-direction: column">
          <text
            style="
              font-size: 34rpx;
              font-family: Helvetica;
              color: #333333;
              line-height: 48rpx;
            "
            >{{ data.state + "共" + chapter_list_data.length + "话" }}</text
          >
          <view
            style="
              color: #999999;
              font-size: 24rpx;
              margin-top: 18rpx;
              display: flex;
              align-items: center;
            "
          >
            <text v-if="historyItem">{{ "阅读至" + historyItem }}</text>
          </view>
          <view
            :class="[['tag3', 'tag2'][(data ? data.pay : 0) - 1]]"
            style="margin-right: 10rpx"
          >
          </view>
        </view>
        <view
          style="
            display: flex;
            margin-top: auto;
            margin-bottom: auto;
            justify-content: space-between;
          "
        >
          <view
            style="font-size: 28rpx"
            :class="sort == 0 ? 'active' : ''"
            @click="sort_click(0)"
          >
            <text>正序</text>
          </view>
          <view style="color: grey; font-size: 12px; margin: 0 20rpx">
            <text>|</text>
          </view>
          <view
            style="font-size: 28rpx"
            :class="sort == 1 ? 'active' : ''"
            @click="sort_click(1)"
          >
            <text>倒叙</text>
          </view>
        </view>
      </view>
      <virtual-list :items="chapter_list_data" :size="size" :remain="remain">
        <template v-slot:default="slotItem">
          <list-item :item="slotItem.item" class="a" :id="id"></list-item>
        </template>
      </virtual-list>
    </hqs-popup>

    <!-- 底部按钮 -->
    <view
      v-if="!loading_show"
      class="tabbar"
      :style="
        typ_show || slw_show
          ? 'z-index:0'
          : '' || isfavor_show
          ? 'z-index:0'
          : '' || comment_show
          ? 'z-index:0'
          : ''
      "
    >
      <u-line></u-line>
      <view
        v-if="tabCurrent === 0"
        style="
          display: flex;
          margin-left: auto;
          margin-right: auto;
          height: 100%;
        "
      >
        <view
          :style="{
            justifyContent: [0, 1].includes(read_status)
              ? 'space-between'
              : 'flex-end',
          }"
          style="
            display: flex;
            margin-left: 20px;
            margin-right: 0px;
            width: 100%;
            align-items: center;
          "
        >
          <text v-if="[0, 1].includes(read_status)">{{ chapter_name }}</text>
          <u-button
            @click="read()"
            hoverStayTime="0"
            v-if="read_status == 0"
            text="开始阅读"
            color="linear-gradient(270deg, #4DCBA5 0%, #6BD6B5 100%)"
            style="
              width: 49%;
              height: 60%;
              margin: 0;
              margin-right: 10rpx;
              border-radius: 50px;
            "
          ></u-button>
          <u-button
            @click="read()"
            hoverStayTime="0"
            v-else-if="read_status == 1"
            color="linear-gradient(270deg, #4DCBA5 0%, #6BD6B5 100%)"
            text="继续阅读"
            style="
              width: 49%;
              height: 60%;
              margin: 0;
              margin-right: 10rpx;
              border-radius: 50px;
            "
          ></u-button>
          <u-button
            @click="read()"
            hoverStayTime="0"
            v-else
            text="等待更新"
            color="linear-gradient(270deg, #4DCBA5 0%, #6BD6B5 100%)"
            style="
              width: 49%;
              height: 60%;
              margin: 0;
              margin-right: 10rpx;
              border-radius: 50px;
            "
          ></u-button>
        </view>
      </view>
      <view v-else style="width: calc(100% - 48rpx); margin: auto">
        <u-button
          @click="comment_show = true"
          color="#F0F5F8"
          style="margin-top: 22rpx; border-radius: 35rpx; color: #333333"
          >评论你的观点～</u-button
        >
      </view>
    </view>

    <u-popup :show="comment_show" round="15" @close="comment_show = false">
      <view
        style="
          border-radius: 50px;
          border: 3rpx solid #eee;
          margin: 8px auto 0px auto;
          width: 6%;
        "
      ></view>
      <view style="padding: 15px">
        <textarea
          v-model="comment"
          focus
          maxlength="200"
          auto-height
          style="
            border-radius: 8px;
            background-color: #f5f5f6;
            padding: 10px;
            width: auto;
            font-size: 30rpx;
            min-height: 88px;
          "
          placeholder="请发表评论~~"
        />
      </view>
      <view
        style="
          display: flex;
          justify-content: space-between;
          padding: 0 15px 15px 15px;
          align-items: center;
        "
      >
        <view style="display: flex; font-size: 30rpx" @click="random_comment()">
          <view>
            <u-icon name="chat" bold size="18"></u-icon>
          </view>
          <view style="margin-left: 3px; font-weight: 500"> 快评 </view>
        </view>
        <view
          @click="subComment()"
          style="
            border-radius: 50px;
            background-color: #ff5500;
            padding: 3px 13px;
            font-size: 30rpx;
            color: #fff;
          "
        >
          发表
        </view>
      </view>
    </u-popup>

    <!-- 分享海报 -->
    <XQ-GeneratePoster ref="draw" />

    <!-- 取消收藏弹窗 -->
    <u-modal
      :show="isfavor_show"
      title=""
      content="亲，确定要取消收藏吗？"
      showCancelButton
      confirmColor="#fd610e"
      @cancel="isfavor_show = false"
      @confirm="cancel_fav()"
      :asyncClose="true"
    ></u-modal>

    <!-- 全屏加载中 -->
    <!-- <u-loading-page
      image="/static/loading.gif"
      imgStyle="width: 111px;height: 135px"
      :loading="loading_show"
      loadingText="主人，再等等..."
      fontSize="16"
      style="z-index: 9999999"
    ></u-loading-page> -->
  </view>
</template>

<script>
import w_md5 from "../../js_sdk/zww-md5/w_md5.js";
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import VirtualList from "@/components/xc-virtual-list/xc-virtual-list.vue";
import ListItem from "@/components/xc-virtual-list/xc-list-item.vue";
import lffBarrage from "@/components/lff-barrage/lff-barrage.vue"; //弹幕组件
export default {
  mixins: [MescrollMixin], // 使用mixin
  components: {
    w_md5,
    VirtualList,
    ListItem,
    lffBarrage,
  },
  data() {
    return {
      historydata: [],
      current: 1,
      isLogin: false, //登陆状态
      user: {}, //用户详情,金币和会员状态
      typ_show: false, //投月票弹窗
      typ_num: 1, //投月票选项,1,2,3,4对应四个选项
      typ_height: 0, //投月票弹窗高度
      slw_data: [], //礼物列表
      slw_show: false, //送礼物弹窗
      slw_id: 1, //礼物ID
      slw_cion: 0, //礼物价格
      slw_height: 748, //送礼物弹窗高度
      dsq_id: "", //打上列表弹幕定时器id
      bgcolor: 0, //导航栏渐变背景
      userinfo: "",
      nav_color: "rgba(0,0,0,0)",
      chapter_show: false,
      chapter_height: 0,
      chapter_heighta: 0,
      loading_show: false, // 全屏加载中
      jianpan: 30,
      ticketValue: "",
      comment: "",
      tabCurrent: 0,
      comment_list: [],
      comment_show: false,
      random_comment_list: [
        "同九义，汝河秀？",
        "同样是腰间盘，阁下为何这么突出？",
        "可爱，想太阳",
        "我以为你喜欢海，原来你喜欢浪。",
        "完了，你也不理我了，我成狗不理了。",
        "现在大学生吃饱了没事干就想找个男朋友女朋友。而我就比较牛逼了，我吃不饱。",
        "每当我准备认真看书的时候，这个世界就变得非常有趣，任何风吹草动都能吸引我。",
        "脚踏两只船，迟早要翻船，脚踏万只船，翻都翻不完。",
        "暑假在家没事做？不如跟我一起做复读机吧。复制这段话再发出去，每天收入0元，我和身边朋友都在做，反正闲着也是闲着。",
        "我和赌毒不共戴天",
        "你应该很孤单吧，一个人缓慢的翻着漫画，看着评论，而这一秒你正好看到我的评论，这一秒你是属于我的，你好，陌生人，我顶你个肺！",
        "有的人喜欢粉色，因为他少女。有的人喜欢红色，因为他热烈。有的人喜欢黑色，因为他emo。有的人喜欢白色，因为他纯洁。有的人喜欢蓝色，因为他忧郁。有的人喜欢绿色，因为他鲜活。有的人喜欢黄色，发给我谢谢",
      ], //快评列表
      read_status: 0, //0=从未阅读，1=继续阅读，2=无法阅读
      chapter_name: "",
      title: "", // 导航栏漫画名称
      data_null: false,
      data_null_text: "暂无内容",
      nav_show: false, //导航栏背景是否显示
      nav_height: 0, //导航栏高度
      img_gg: "",
      url_gg: "",
      // img_gg: 'https://image.zymkcdn.com/file/news/000/004/456.jpg-1920x560.webp',
      isfavor_status: false,
      isfavor_show: false, //取消收藏弹窗显示控制
      love_list: "",
      chapter_list: "",
      chapter_list_data: [
        { id: "1", name: "开心漫画", addtime: "", cion: "0", vip: "0" },
      ],
      size: 0,
      item_height: 0,
      remain: 1,
      sort: 0, // 0=正序，1=倒叙

      chapter_page_num: 1,
      id: 0, //漫画ID
      time: "",
      token: "",
      app_key: "",
      websiteUrl: "",
      utoken: "",
      data: "",
      tabs_index: 0,
      downOption: {
        use: true,
        auto: false,
        autoShowLoading: true,
        inOffsetRate: 0.4,
        // offset: 50
      },
      TicketList: [3, 6, 18, 30, 90, 128],
      upOption: {
        use: false,
      },
      option: {
        //绘制海报内容
        codeUrl:
          "https://pic1.zhimg.com/80/v2-2714df42147132464a71af391ed04be4_720w.jpg", //二维码
        // codeUrl: '/static/tym.jpg', //二维码
        coverUrl:
          "https://pic1.zhimg.com/80/v2-2714df42147132464a71af391ed04be4_720w.jpg", //图片
        headUrl:
          "https://pic1.zhimg.com/80/v2-b9df1fdfe67f2177d5c84af90dcadfc1_720w.jpg?source=1940ef5c", //头像
        bgUrl:
          "https://pic3.zhimg.com/v2-8fbde0f9ac6a19a23aa839e73394618a_b.jpg", //图片背景填充，和 fillStyle 只能传一个，bgUrl 优先级高于 fillStyle
        fillStyle: "#0688ff", //纯色背景填充颜色
        nickName: "神秘人", //登录的用户名
        miniName: "@邀请你陪我一起来看漫画啦！", //邀请内容
        tkName: "漫画名称", //漫画名称
        tkAuthor: "漫画简介", //漫画简介
        tkType: "漫画作者", //漫画作者
        cost: "完结", //连载状态
        isPub: "人气", //漫画人气
      },
    };
  },
  onPageScroll: function (e) {
    this.nav_show = true;
    this.title = this.data.name;
    if (e.scrollTop >= 0 && e.scrollTop <= 8) {
      // this.flag = true
      this.bgcolor = "opacity:0";
    } else if (e.scrollTop > 8 && e.scrollTop <= 16) {
      // this.flag = false
      this.bgcolor = "opacity:0.1";
    } else if (e.scrollTop > 16 && e.scrollTop <= 24) {
      this.bgcolor = "opacity:0.2";
    } else if (e.scrollTop > 24 && e.scrollTop <= 32) {
      this.bgcolor = "opacity:0.3";
    } else if (e.scrollTop > 32 && e.scrollTop <= 40) {
      this.bgcolor = "opacity:0.4";
    } else if (e.scrollTop > 40 && e.scrollTop <= 48) {
      this.bgcolor = "opacity:0.5";
    } else if (e.scrollTop > 48 && e.scrollTop <= 56) {
      this.bgcolor = "opacity:0.6";
    } else if (e.scrollTop > 56 && e.scrollTop <= 64) {
      this.bgcolor = "opacity:0.7";
    } else if (e.scrollTop > 64 && e.scrollTop <= 72) {
      this.bgcolor = "opacity:0.8";
    } else if (e.scrollTop > 72 && e.scrollTop <= 80) {
      this.bgcolor = "opacity:0.9";
    } else if (e.scrollTop > 80) {
      this.bgcolor = "opacity:1";
    }
  },
  onLoad: function (option) {
    this.id = option.id;
    console.log("屏幕高度:", uni.getSystemInfoSync().screenHeight);
    console.log("可使用窗口高度:", uni.getSystemInfoSync().windowHeight);
    this.chapter_height =
      uni.getSystemInfoSync().windowHeight -
      uni.getSystemInfoSync().statusBarHeight -
      60;
    this.chapter_heighta = this.chapter_height - 44;
    this.nav_height = uni.getSystemInfoSync().statusBarHeight + 44;
    uni.showToast({
      title: uni.getSystemInfoSync().statusBarHeight,
      icon: "none",
    });
    this.req_ad();
  },
  onShow() {
    this.get_history_list();
    this.shuaxin(this.id);
  },
  onBackPress(e) {
    console.log(e);
    if (e.from == "backbutton") {
      if (this.chapter_show) {
        this.chapter_show = false;
      } else if (this.typ_show) {
        this.typ_show = false;
      } else if (this.slw_show) {
        this.slw_show = false;
      } else if (this.comment_show) {
        this.comment_show = false;
      } else {
        uni.navigateBack({});
      }
      return true;
    }
  },
  computed: {
    payNumber() {
      return this.slw_data.find((item) => item.id === this.slw_id)
        ? this.slw_data.find((item) => item.id === this.slw_id).cion
        : 0;
    },
    historyItem() {
      return this.historydata.find((item) => item.book_id == this.id)
        ?.chapter_name;
    },
  },
  watch: {
    slw_show: {
      handler(newv, old) {
        if (!newv) {
          clearInterval(this.dsq_id);
        }
      },
    },
  },
  methods: {
    get_history_list() {
      let his = uni.getStorageSync("mh_history");
      if (typeof his !== "object") {
        this.historydata = [];
      } else {
        this.historydata = his;
      }
    },
    // 送礼物
    slw_send() {
      if (this.isLogin) {
        var time = new Date().getTime();
        this.app_key = getApp().globalData.websiteKey;

        var param =
          "deviceid=" +
          getApp().globalData.deviceid +
          "&facility=" +
          getApp().globalData.facility +
          "&gid=" +
          this.slw_id +
          "&mid=" +
          this.id +
          "&timestamp=" +
          time +
          "&user_id=" +
          uni.getStorageSync("user").uid +
          "&user_token=" +
          uni.getStorageSync("user").utoken;
        var sign = w_md5.hex_md5_32Upper(param + this.app_key);
        uni.request({
          url:
            getApp().globalData.websiteUrl +
            "/index.php/appv1/gift/send?" +
            param +
            "&sign=" +
            sign,
          success: (res) => {
            console.log("打赏结果: ", res.data);
            if (res.data.code == 1) {
              uni.showToast({
                icon: "success",
                // position: 'bottom',
                title: "打赏成功",
              });
            } else {
              uni.showToast({
                icon: "none",
                // position: 'bottom',
                title: res.data.msg,
              });
            }
            this.shuaxin(this.id);
          },
        });
      } else {
        uni.showToast({
          title: "请先登录",
          icon: "error",
        });
        uni.navigateTo({
          url: "/pages/login/login",
        });
      }
    },
    // 投月票
    typ_send() {
      if (this.isLogin) {
        let num = this.typ_num;
        if (this.typ_num == 4) {
          num = this.user.ticket;
        }

        var time = new Date().getTime();
        this.app_key = getApp().globalData.websiteKey;

        var param =
          "bid=0&deviceid=" +
          getApp().globalData.deviceid +
          "&facility=" +
          getApp().globalData.facility +
          "&mid=" +
          this.id +
          "&ticket=" +
          num +
          "&timestamp=" +
          time +
          "&user_id=" +
          uni.getStorageSync("user").uid +
          "&user_token=" +
          uni.getStorageSync("user").utoken;
        var sign = w_md5.hex_md5_32Upper(param + this.app_key);
        uni.request({
          url:
            getApp().globalData.websiteUrl +
            "/index.php/appv1/gift/ticket_send?" +
            param +
            "&sign=" +
            sign,
          success: (res) => {
            console.log("投月票结果: ", res.data);
            if (res.data.code == 1) {
              uni.showToast({
                icon: "success",
                // position: 'bottom',
                title: "投票成功",
              });
            } else {
              uni.showToast({
                icon: "none",
                // position: 'bottom',
                title: res.data.msg,
              });
            }
            this.shuaxin(this.id);
          },
        });
      } else {
        uni.showToast({
          title: "请先登录",
          icon: "error",
        });
        uni.navigateTo({
          url: "/pages/login/login",
        });
      }
    },
    sort_click(id) {
      if (id == 0) {
        if (this.sort !== 0) {
          this.chapter_list_data = this.chapter_list_data.reverse();
          this.sort = 0;
        }
      } else {
        if (this.sort !== 1) {
          this.chapter_list_data = this.chapter_list_data.reverse();
          this.sort = 1;
        }
      }
    },
    req_userinfo() {
      var time = new Date().getTime();
      this.app_key = getApp().globalData.websiteKey;

      var param =
        "deviceid=" +
        getApp().globalData.deviceid +
        "&facility=" +
        getApp().globalData.facility +
        "&timestamp=" +
        time +
        "&user_id=" +
        uni.getStorageSync("user").uid +
        "&user_token=" +
        uni.getStorageSync("user").utoken;

      var sign = w_md5.hex_md5_32Upper(param + this.app_key);
      return new Promise((resolve, reject) => {
        uni.request({
          url:
            getApp().globalData.websiteUrl +
            "/index.php/appv1/user/index?" +
            param +
            "&sign=" +
            sign,
          success: (res) => {
            console.log("用户信息：", res.data);
            resolve(res.data.user);
          },
        });
      });
    },

    async share_qrcode() {
      if (!uni.getStorageSync("user")) {
        this.option.headUrl = "/static/mrtx.gif"; //头像
        this.option.nickName = "神秘人"; //名称
      } else {
        this.userinfo = await this.req_userinfo();
        this.option.headUrl = this.userinfo.pic; //头像
        this.option.nickName = this.userinfo.nichen || this.userinfo.name; //名称
      }

      this.option.codeUrl =
        "https://api.pwmqr.com/qrcode/create/?url=" + this.data.share_url;
      this.option.coverUrl = this.data.picx;
      // this.option.bgUrl = this.data.pic //海报背景图
      this.option.tkName = this.data.name; //漫画名称
      this.option.tkAuthor = this.data.text; //漫画简介
      this.option.tkType = this.data.author; //漫画作者
      this.option.cost = this.data.state; //连载状态
      this.option.isPub = this.data.hits + "人气"; //漫画人气
      this.$refs.draw.share_qrcode(this.option);
    },
    chapter_close() {
      this.chapter_show = false;
    },
    chapter_open() {
      // uni.navigateTo({
      // 	url: './chapter/chapter?id=' + this.id
      // })
      this.chapter_show = true;
      setTimeout(() => {
        let _this = this;
        uni.getSystemInfo({
          success: function (res) {
            // res - 各种参数

            let obj = uni.createSelectorQuery().select(".a");

            obj
              .boundingClientRect(function (data) {
                // data - 各种参数

                console.log(data);
                _this.item_height = data.height;
                console.log(_this.item_height);
                // this.size = +uni.upx2px(52);
                _this.size = _this.item_height;
                console.log(_this.chapter_heighta);
                _this.remain = (_this.chapter_heighta / _this.size / 10) * 9;
                console.log(_this.remain);
              })
              .exec();
          },
        });
      }, 800);
    },
    // 投月票弹窗
    typ_open() {
      if (!this.isLogin) {
        uni.navigateTo({
          url: "../login/login",
        });
        return;
      }
      this.typ_show = true;
    },
    // 送礼物弹窗
    slw_open(value) {
      if (!this.isLogin) {
        uni.navigateTo({
          url: "../login/login",
        });
        return;
      }
      this.slw_show = true;
      this.$nextTick(() => {
        this.current = value;
      });
      var time = new Date().getTime();
      this.app_key = getApp().globalData.websiteKey;
      var param =
        "deviceid=" +
        getApp().globalData.deviceid +
        "&facility=" +
        getApp().globalData.facility +
        "&mid=" +
        this.id +
        "&timestamp=" +
        time;
      var sign = w_md5.hex_md5_32Upper(param + this.app_key);
      uni.request({
        url:
          getApp().globalData.websiteUrl +
          "/index.php/appv1/gift/index?" +
          param +
          "&sign=" +
          sign,
        success: (res) => {
          console.log("礼物列表: ", res.data);
          this.slw_data = res.data.list;
        },
      });

      uni.request({
        url:
          getApp().globalData.websiteUrl +
          "/index.php/api/rend/gift?mid=" +
          this.id,
        success: (res) => {
          console.log(res.data);
          if (res.data.list.length !== 0) {
            this.slw_dm(res.data.list);
          }
        },
      });
    },
    // 送礼物弹幕
    slw_dm(data) {
      let slw_list = data;
      let i = 0;
      this.dsq_id = setInterval(() => {
        this.$refs.slw.add({
          name: slw_list[i].name,
          nick: slw_list[i].unichen,
          avatar: slw_list[i].upic,
        });

        if (i == slw_list.length - 1) {
          i = 0;
        } else {
          i += 1;
        }
      }, 2000);
    },
    req_ad() {
      var time = new Date().getTime();
      this.app_key = getApp().globalData.websiteKey;

      var param =
        "deviceid=" +
        getApp().globalData.deviceid +
        "&facility=" +
        getApp().globalData.facility +
        "&timestamp=" +
        time;
      var sign = w_md5.hex_md5_32Upper(param + this.app_key);

      uni.request({
        url:
          getApp().globalData.websiteUrl +
          "/index.php/appv1/kxapps/ads?" +
          param +
          "&sign=" +
          sign,
        success: (res) => {
          console.log(res.data);
          this.img_gg = res.data.list[2].img;
          this.url_gg = res.data.list[2].url;
        },
      });
    },
    keyboardheightchange(e) {
      console.log(e.detail.height);
      this.jianpan = e.detail.height + 30;
    },
    // 快评
    random_comment() {
      this.comment =
        this.random_comment_list[
          Math.floor(Math.random() * this.random_comment_list.length) + 1
        ];
    },
    // 评论点赞
    comment_zan_click(id) {
      if (!uni.getStorageSync("user")) {
        console.log("未登录");
        uni.showToast({
          icon: "none",
          position: "bottom",
          title: "请先登录",
        });
        uni.navigateTo({
          url: "../login/login",
        });
      } else {
        console.log("已登录", uni.getStorageSync("user"));
        var time = new Date().getTime();
        this.app_key = getApp().globalData.websiteKey;
        var param =
          "deviceid=" +
          getApp().globalData.deviceid +
          "&facility=" +
          getApp().globalData.facility +
          "&fid=0" +
          "&id=" +
          id +
          "&timestamp=" +
          time +
          "&user_id=" +
          uni.getStorageSync("user").uid +
          "&user_token=" +
          uni.getStorageSync("user").utoken;
        var sign = w_md5.hex_md5_32Upper(param + this.app_key);
        uni.request({
          url:
            getApp().globalData.websiteUrl +
            "/index.php/appv1/comment/zan?" +
            param +
            "&sign=" +
            sign,
          success: (res) => {
            console.log("评论点赞结果: ", res.data);
            if (res.data.code == 1) {
              uni.showToast({
                icon: "none",
                position: "bottom",
                title: "点赞成功",
              });
              this.shuaxin(this.id);
            } else {
              uni.showToast({
                icon: "none",
                position: "bottom",
                title: res.data.msg,
              });
            }
            // this.get_comment_list()
          },
        });
      }
    },
    //评论赞取消
    comment_zan_cancel(id) {
      if (!uni.getStorageSync("user")) {
        console.log("未登录");
        uni.showToast({
          icon: "none",
          position: "bottom",
          title: "请先登录",
        });
        uni.navigateTo({
          url: "../login/login",
        });
      } else {
        console.log("已登录", uni.getStorageSync("user"));
        var time = new Date().getTime();
        this.app_key = getApp().globalData.websiteKey;
        var param =
          "deviceid=" +
          getApp().globalData.deviceid +
          "&facility=" +
          getApp().globalData.facility +
          "&fid=0" +
          "&id=" +
          id +
          "&timestamp=" +
          time +
          "&user_id=" +
          uni.getStorageSync("user").uid +
          "&user_token=" +
          uni.getStorageSync("user").utoken;
        var sign = w_md5.hex_md5_32Upper(param + this.app_key);
        uni.request({
          url:
            getApp().globalData.websiteUrl +
            "/index.php/appv1/comment/zan?" +
            param +
            "&sign=" +
            sign,
          success: (res) => {
            console.log("评论点赞结果: ", res.data);
            if (res.data.code == 1) {
              uni.showToast({
                icon: "none",
                position: "bottom",
                title: "取消点赞",
              });
              this.shuaxin(this.id);
            } else {
              uni.showToast({
                icon: "none",
                position: "bottom",
                title: res.data.msg,
              });
            }
            // this.get_comment_list()
          },
        });
      }
    },
    read_chapter(chapter_id) {
      getApp().globalData.book_img = this.data.picx;
      uni.navigateTo({
        url: "../read/read?book_id=" + this.id + "&id=" + chapter_id,
      });
    },
    read() {
      if (this.read_status == 2) {
        console.log("没有章节");
        uni.showToast({
          icon: "none",
          position: "bottom",
          title: "没有章节可看了",
        });
      } else {
        getApp().globalData.book_img = this.data.picx;
        uni.navigateTo({
          url: "../read/read?book_id=" + this.id,
        });
      }
    },
    get_comment_list() {
      var time = new Date().getTime();
      this.app_key = getApp().globalData.websiteKey;

      var param =
        "bid=0&deviceid=" +
        getApp().globalData.deviceid +
        "&facility=" +
        getApp().globalData.facility +
        "&mid=" +
        this.id +
        "&page=1&size=150&timestamp=" +
        time;
      var sign = w_md5.hex_md5_32Upper(param + this.app_key);
      uni.request({
        url:
          getApp().globalData.websiteUrl +
          "/index.php/appv1/comment/index?" +
          param +
          "&sign=" +
          sign,
        success: (res) => {
          console.log("评论列表: ", res.data);
          this.comment_list = res.data.list;
        },
      });
    },
    subComment() {
      if (this.comment == "") {
        return uni.showToast({
          icon: "none",
          title: "是不是忘记写点什么了",
        });
      }
      if (!uni.getStorageSync("user")) {
        console.log("未登录");
        uni.showToast({
          icon: "none",
          position: "bottom",
          title: "请先登录",
        });
        uni.navigateTo({
          url: "../login/login",
        });
      } else {
        console.log("已登录", uni.getStorageSync("user"));
        var time = new Date().getTime();
        this.app_key = getApp().globalData.websiteKey;

        var param =
          "deviceid=" +
          getApp().globalData.deviceid +
          "&facility=" +
          getApp().globalData.facility +
          "&mid=" +
          this.id +
          "&text=" +
          this.comment +
          "&timestamp=" +
          time +
          "&user_id=" +
          uni.getStorageSync("user").uid +
          "&user_token=" +
          uni.getStorageSync("user").utoken;
        var sign = w_md5.hex_md5_32Upper(param + this.app_key);
        uni.request({
          url:
            getApp().globalData.websiteUrl +
            "/index.php/appv1/comment/add?" +
            param +
            "&sign=" +
            sign,
          success: (res) => {
            this.comment_show = false;
            this.comment = "";
            console.log("评论结果: ", res.data);
            uni.showToast({
              icon: "none",
              position: "bottom",
              title: res.data.msg,
            });
            this.shuaxin(this.id);
            // this.get_comment_list()
          },
        });
      }
    },
    //
    onChange({ index }) {
      this.current = index;
      this.slw_height = index === 0 ? "748" : "500";
    },
    onChange1({ index }) {
      this.tabCurrent = index;
    },
    // 猜你喜欢
    cainixihuan(id) {
      this.shuaxin(id);
      this.mescroll.scrollTo(0, 300);
    },
    shuaxin(id) {
      // this.loading_show = true
      this.chapter_page_num = 1;
      this.read_status = 2;
      this.chapter_name = "";

      this.id = id;
      if (!uni.getStorageSync("user")) {
        console.log("未登录", uni.getStorageSync("user"));
        this.isLogin = false;
      } else {
        console.log("已登录", uni.getStorageSync("user"));
        this.isLogin = true;
      }
      // this.get_chapter_list()
      // this.get_comment_list()

      //获取阅读记录
      var mh_history = uni.getStorageSync("mh_history");
      if (typeof mh_history !== "object") {
        mh_history = [];
      }
      mh_history.forEach((value) => {
        if (Number(value.book_id) === Number(this.id)) {
          this.read_status = 1;
          this.chapter_name = value.chapter_name;
        }
      });
      this.get_detail();
      this.get_chapter_list();
    },
    isfavor() {
      if (!uni.getStorageSync("user")) {
        console.log("未登录", uni.getStorageSync("user"));
        uni.showToast({
          icon: "none",
          position: "bottom",
          title: "请先登录",
        });
        uni.navigateTo({
          url: "../login/login",
        });
      } else {
        console.log("已登录", uni.getStorageSync("user"));
        var time = new Date().getTime();
        this.app_key = getApp().globalData.websiteKey;

        if (this.data.fav !== 0) {
          this.isfavor_show = true;
        } else {
          var param =
            "deviceid=" +
            getApp().globalData.deviceid +
            "&facility=" +
            getApp().globalData.facility +
            "&id=" +
            this.id +
            "&timestamp=" +
            time +
            "&user_id=" +
            uni.getStorageSync("user").uid +
            "&user_token=" +
            uni.getStorageSync("user").utoken;
          var sign = w_md5.hex_md5_32Upper(param + this.app_key);
          uni.request({
            url:
              getApp().globalData.websiteUrl +
              "/index.php/appv1/cases/add?" +
              param +
              "&sign=" +
              sign,
            success: (res) => {
              console.log("加入书架成功");
              this.data.fav = 1;
              this.data.shits = parseInt(this.data.shits) + 1;
              uni.showToast({
                icon: "none",
                position: "bottom",
                title: "收藏成功,请在书架查看",
              });
              this.isfavor_status = true; //无用
            },
          });
        }
      }
    },
    // 取消收藏
    cancel_fav() {
      var time = new Date().getTime();
      this.app_key = getApp().globalData.websiteKey;
      var param =
        "deviceid=" +
        getApp().globalData.deviceid +
        "&facility=" +
        getApp().globalData.facility +
        "&ids=" +
        this.id +
        "&timestamp=" +
        time +
        "&user_id=" +
        uni.getStorageSync("user").uid +
        "&user_token=" +
        uni.getStorageSync("user").utoken;
      var sign = w_md5.hex_md5_32Upper(param + this.app_key);
      uni.request({
        url:
          getApp().globalData.websiteUrl +
          "/index.php/appv1/cases/del/comic?" +
          param +
          "&sign=" +
          sign,
        success: (res) => {
          console.log("删除书架成功");
          this.data.fav = 0;
          this.data.shits = parseInt(this.data.shits) - 1;
          uni.showToast({
            icon: "none",
            position: "bottom",
            title: "取消收藏成功",
          });
          this.isfavor_status = false; //无用
          this.isfavor_show = false;
        },
      });
    },
    get_chapter_list() {
      var time = new Date().getTime();
      this.app_key = getApp().globalData.websiteKey;
      var param =
        "deviceid=" +
        getApp().globalData.deviceid +
        "&facility=" +
        getApp().globalData.facility +
        "&id=" +
        this.id +
        "&timestamp=" +
        time;
      var sign = w_md5.hex_md5_32Upper(param + this.app_key);
      uni.request({
        url:
          getApp().globalData.websiteUrl +
          "/index.php/appv1/comic/chapter?" +
          param +
          "&sign=" +
          sign,
        success: (res) => {
          // this.loading_show = false
          // console.log(res.data)
          this.chapter_list_data = res.data.list;
        },
      });
    },
    get_detail() {
      var time = new Date().getTime();
      this.app_key = getApp().globalData.websiteKey;

      if (!uni.getStorageSync("user")) {
        console.log("未登录", uni.getStorageSync("user"));
        var param =
          "deviceid=" +
          getApp().globalData.deviceid +
          "&facility=" +
          getApp().globalData.facility +
          "&id=" +
          this.id +
          "&timestamp=" +
          time;
      } else {
        var param =
          "deviceid=" +
          getApp().globalData.deviceid +
          "&facility=" +
          getApp().globalData.facility +
          "&id=" +
          this.id +
          "&timestamp=" +
          time +
          "&user_id=" +
          uni.getStorageSync("user").uid +
          "&user_token=" +
          uni.getStorageSync("user").utoken;
      }

      var sign = w_md5.hex_md5_32Upper(param + this.app_key);
      uni.request({
        url:
          getApp().globalData.websiteUrl +
          "/index.php/appv1/comic/info?" +
          param +
          "&sign=" +
          sign,
        success: (res) => {
          console.log(res.data);
          this.data = res.data.comic;
          this.love_list = res.data.comic.love_list;
          // this.mescroll.endSuccess();
          setTimeout(() => {
            this.loading_show = false;
          }, 500);
          if (this.title !== "") {
            this.title = this.data.name;
          }

          if (res.data.comic.chapter_list.length == 0) {
            (this.data_null = true), (this.data_null_text = "暂无章节");
            this.read_status = 2;
            this.chapter_name = "暂无章节";
          } else {
            if (this.chapter_name == "") {
              this.read_status = 0;
              this.chapter_name = res.data.comic.chapter_list[0].name;
            }
          }
          console.log(this.isLogin);
          // 判断是否登录
          if (this.isLogin) {
            this.user = res.data.comic.user;
          }
        },
      });
    },
    /*目录列表下拉刷新的回调 */
    downCallback() {
      // if(this.tabs_index==1){
      // 	console.log("目录下拉刷新")
      // 	this.get_chapter_list()
      // }
      // if(this.tabs_index==2){
      // 	console.log("评论下拉刷新")
      // 	this.get_comment_list()
      // }
      this.chapter_page_num = 1;
      this.get_detail();

      // setTimeout(() => {
      //  	this.mescroll.endSuccess();
      // }, 2000);
    },
    ad() {
      // plus.runtime.openWeb(this.url_gg)
      uni.navigateTo({
        url: "../webview/webview?uri=" + this.url_gg,
      });
    },
    goCom() {
      // plus.runtime.openWeb(this.url_gg)
      uni.navigateTo({
        url: "/pages/ucenter/comment/comment?id=" + this.id,
      });
    },
    goTic() {
      uni.navigateTo({
        url: "/pages/ucenter/ticket/ticket",
      });
    },
    goCoin() {
      uni.navigateTo({
        url: "/pages/ucenter/coin/coin",
      });
    },
  },
};
</script>

<style lang="scss">
.chapter_title {
  // font-size: 14px;
  // font-weight: 300;
  // color: #fff;
  display: -webkit-box;
  /* -webkit-box-orient: vertical; */
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.tabbar {
  z-index: 99999;
  width: 100%;
  height: 65px;
  position: fixed;
  bottom: 0px;
  background-color: #ffffff;
  left: 0;
  right: 0;
}
.cm_tabbar {
  width: 95%;
  height: 55px;
  position: fixed;
  background-color: #f0f0f0;
  left: 0;
  right: 0;
}

.i_new_title {
  font-size: 14px;
  font-weight: 300;
  color: #000;
  display: -webkit-box;
  /* -webkit-box-orient: vertical; */
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.scroll-list {
  @include flex(column);

  &__goods-item {
    margin-right: 10px;

    &__image {
      width: 80px;
      height: 110px;
      border-radius: 8px;
    }

    &__text {
      color: #f56c6c;
      text-align: center;
      font-size: 12px;
      margin-top: 5px;
    }
  }

  &__show-more {
    background-color: #fff0f0;
    border-radius: 3px;
    padding: 3px 6px;
    @include flex(column);
    align-items: center;

    &__text {
      font-size: 12px;
      width: 12px;
      color: #f56c6c;
      line-height: 16px;
    }
  }
}

.page-conatiner {
  .card {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
    overflow: hidden;
    .bg-image {
      position: absolute;
      width: 100%;
      top: 0;
      z-index: -1;
      filter: blur(20rpx) brightness(70%); // 模糊半径和变暗
      transform: scale(1.8); // 控制边缘是否模糊，小于1的话边缘会模糊
      image {
        height: 100%;
        width: 100%;
        vertical-align: middle;
      }
    }
    .bg-gray {
      // 相当于加了一层遮罩
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      background: rgba(0, 0, 0, 0.1);
      z-index: -1;
      opacity: 0.5;
    }
  }
}

.active {
  color: #fd610e;
}

//禁止滚动
.control-scroll {
  height: 100vh;
  overflow-y: hidden;
}
.tag3 {
  position: relative;
  &::after {
    content: "";
    // padding: 5rpx 12rpx 5rpx 12rpx;
    position: absolute;
    width: 80rpx;
    height: 34rpx;
    top: 0rpx;
    left: 0rpx;
    background-image: url("../class/images/no-free.png");
    background-size: 100% 100%;
    border-radius: 15rpx;
    font-size: 16rpx;
    color: #000000;
    text-align: center;
  }
}
.tag1 {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    width: 80rpx;
    height: 34rpx;
    background-image: url("../class/images/free.png");
    background-size: 100% 100%;
    top: 0rpx;
    border-radius: 15rpx;
    font-size: 16rpx;
    color: #000000;
    text-align: center;
  }
}
.tag2 {
  position: relative;
  &::after {
    content: "VIP";
    padding: 5rpx 20rpx 5rpx 20rpx;
    position: absolute;
    left: 0rpx;
    background: linear-gradient(223deg, #fdf37d 0%, #f2b040 100%);
    border-radius: 15rpx;
    font-size: 22rpx;
    color: #000000;
    text-align: center;
  }
}
.c {
  margin-top: 37rpx;
}
</style>
